<!-- 
分类页面
 * @Author: zuobufan
 * @Location: 中杰科技研发中心
 * @LastEditors: zuobufan
 * @CreateEditTime: 2021-09-27 17:50:00
 -->
<template>
  <div class="category">
    <!-- 搜索框 -->
    <van-search
      v-model="searchVal"
      shape="round"
      placeholder="请输入搜索关键词"
      @click="$router.push('/home/searchPopup').catch(err =>{})"
    />

    <!-- 侧边导航栏 -->
    <div class="bottom">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="item in categoryList" :key="item.id" :title="item.name" @click="LetNavClick(item.id)" />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="box-img">
          <img :src="currentCategory.img_url" alt>
          <h5>{{currentCategory.front_name}}</h5>
        </div>
        <div class="title">
          <div class="line"></div>
          <div class="text">{{currentCategory.name}}</div>
        </div>
        <van-grid :border="false" :column-num="3">
          <van-grid-item
            v-for="item in subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { GetCategoryAllData,GetCategoryCurrentData } from "@/request/api";

export default {
  data() {
    return {
      searchVal: "", //搜索值
      activeKey: 0, //绑定当前选中项的索引
      categoryList: [], //左侧导航的数据
      currentCategory: [], //右侧导航的数据
      subCategoryList: [] // 宫格图标的数据
    };
  },
  created() {
    GetCategoryAllData().then(res => {
      console.log(res);
      if (res.errno == 0) {
        this.categoryList = res.data.categoryList;
        this.currentCategory = res.data.currentCategory;
        this.subCategoryList = res.data.currentCategory.subCategoryList;
      }
    });
  },
  methods: {
      LetNavClick(id){
          GetCategoryCurrentData({id: id}).then(res =>{
              console.log(res);
              if(res.errno == 0){
                  this.currentCategory = res.data.currentCategory;
                  this.subCategoryList = res.data.currentCategory.subCategoryList;
              }
          })
      }
  }
};
</script>
<style lang="less" scoped>
* {
  font-size: 0.14rem;
}
.category {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #fff;
  height: 100vh;
  .bottom {
    display: flex;
    .left {
      width: 20%;
      height: 100vh;
      background-color: #f7f8fa;
    }
    .right {
      width: 80%;
      .box-img {
        width: 100%;
        position: relative;
        img {
          height: 140px;
          width: 95%;
          margin: 0 0.07rem;
          border-radius: 5px;
          box-shadow: 0 0 6px #000;
          filter: brightness(0.6); //css5的滤镜属性
        }
        h5 {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 0.18rem;
          color: #fff;
          text-align: center;
          z-index: 999;
          transform: translate(-50%, -50%);
        }
      }
      .title {
        width: 100%;
        height: 40px;
        background-color: #fff;
        position: relative;
        .line {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 58%;
          height: 2px;
          background-color: #ccc;
          margin: auto;
        }
        .text {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 26%;
          height: 30px;
          margin: auto;
          margin-top: 10px;
          font-size: 0.18rem;
          background-color: #fff;
          text-align: center;
        }
      }
    }
  }
}
</style>